<template>
  <BasicModal
    v-bind="$attrs"
    width="30%"
    :height="30"
    title="调整分组"
    @register="register"
    @ok="submit"
  >
    <BasicForm @register="registerForm" />
    <template #footer>
      <div style="margin-right: 140px">
        <a-button style="align-items: center" type="success" @click="submit">
          确定
        </a-button>
        <a-button type="error" @click="clearGroup"> 清除分组 </a-button>
      </div>
    </template>
  </BasicModal>
</template>
<script setup>
import { ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { defHttp } from '@/utils/http/axios';
import { BasicForm, useForm } from '@/components/Form';
const { createMessage } = useMessage();
//选中部门主键
const propsData = ref();
const emit = defineEmits(['success', 'register']);
const [register, { closeModal }] = useModalInner((data) => {
  propsData.value = data.ids;
});
const [registerForm, { resetFields, getFieldsValue,setFieldsValue, validate }] = useForm({
  labelWidth: 100,
  schemas: [
    {
      field: 'groupsId',
      label: '分组',
      component: 'ApiSelect',
      componentProps: {
        api: '/admin/groups/list',
        treeDefaultExpandAll: false,
        fieldNames: {
          label: 'name',
          key: 'id',
          value: 'id',
        },
      },
      colProps: {
        span: 20,
        offset: 0,
      },
    },
  ],
  baseRowStyle: { 'margin-top': '50px' },
  showActionButtonGroup: false,
  baseColProps: { span: 15 },
  mode: 'edit',
});
// 确定提交
async function submit() {
  const formData = getFieldsValue();
  if (formData.groupsId) {
    await defHttp.post({
      url: '/admin/member/adjustGroups',
      data: JSON.stringify({
        ids: propsData.value,
        groupsId: formData.groupsId,
      }),
    });
    closeModal();
    emit('success');
    createMessage.success('已成功调整');
  } else {
    createMessage.error('请选择分组');
  }
}
// 确定提交
async function clearGroup() {
  await defHttp.post({
    url: '/admin/member/deleteGroups',
    data: JSON.stringify({
      ids: propsData.value,
    }),
  });
  closeModal();
  emit('success');
  createMessage.success('已成功清除');
}
const handleResizeColumn = (w, col) => {
  col.width = w;
};
</script>
